<template>
    <div id="leftLoops">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-line"></icon>
                </span>
                <div class="d-flex">
                    <span>销售柱状图</span>
                </div>
            </div>
            <div class="d-flex jc-center body-box">
				<div id="left2" style="width: 100%;height:4.2rem;padding-top:0.4rem"></div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
				option:{},
				myChart:null
            };
        },
        mounted() {
			this.setOption();
        },
        methods: {
			setOption(){
				this.myChart = this.$echarts.init(document.getElementById('left2'));
				this.option = {
					backgroundColor: 'rgb(15,17,33)',
					color: ['rgb(77,161,217)', 'rgb(78,196,232)', 'rgb(116,224,227)', 'rgb(162,231,185)','rgb(250,220,97)','rgb(250,160,128)'],
					tooltip: {
				      trigger: 'axis',
				      axisPointer: {
				        type: 'cross',
				        crossStyle: {
				          color: '#999'
				        }
				      }
				    },
				    toolbox: {
				      feature: {
				        dataView: { show: false, readOnly: false },
				        magicType: { show: false, type: ['line', 'bar'] },
				        restore: { show: false },
				        saveAsImage: { show: false }
				      }
				    },
				    legend: {
						data: ['华东', '华南', '华北','东北','华中','其他'],
						textStyle: {
					        color: "#fff", 
					    },
				    },
				    xAxis: [
				      {
				        type: 'category',
				        data: ['销售数据'],
				        axisPointer: {
							type: 'shadow',
				        },
						axisLabel: {
						    textStyle: {
						        color: "#fff", 
						    },
						},
				      }
				    ],
				    yAxis: [
				      {
				            type: 'value',
							axisLabel: {
							    textStyle: {
							        color: "#fff", 
							    },
							},
				          }
				    ],
				    series: [
				      {
				        name: '华东',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [
				          40
				        ]
				      },
				      {
				        name: '华南',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [
				          15
				        ]
				      },
				      {
				        name: '华北',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [15]
				      },
				      {
				        name: '东北',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [15]
				      },
				      {
				        name: '华中',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [10]
				      },
				      {
				        name: '其他',
				        type: 'bar',
				        tooltip: {
				          valueFormatter: function (value) {
				            return value ;
				          }
				        },
				        data: [5]
				      }
				    ]
				};
				this.option && this.myChart.setOption(this.option);
			}
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep#leftLoops {
        padding: 0.2rem;
        height: 5rem;
        border-radius: 0.0625rem;

        .bg-color-black {
            height: 4.2rem;
            border-radius: 0.125rem;
        }

        .text {
            color: #c3cbde;
        }

        .color0 {
            color: #ff5722;
        }

        .color1 {
            color: #409EFF;
        }
    }

</style>
